<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/map.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/scrollable-buttons.css" />
</head>
<body>

<div id="top_container">
  <div class="container_12">
    <!-- top section contains logo and social network links -->
    <div class="grid_3">
      <div id="logo">
        <h1><a href="#"><img src="img/logo.png" /></a></h1>
      </div>
    </div>
    <div class="grid_9 topmenu_container">
      <div id="topmenu">
        <!-- list of social network links, with images -->
        <ul>
          <li><a href="#"><img src="img/tweeter.png"></a></li>
          <li><a href="#"><img src="img/fb.png"></a></li>
          <li><a href="#"><img src="img/linkedin.png"></a></li>
          <li><a href="#"><img src="img/rss.png"></a></li>
          <li><a href="#"><img src="img/arrow.png"></a></li>
        </ul>
      </div>
    </div>
    <div class="clear"></div>

    <!-- login and search -->
    <div class="prefix_4 grid_5 suffix_3">
      <div id="account-box">
        <span class="inbox">
          <a href="#">Pesan Saya</a>
        </span>
        <span class="my-account">
          <a href="#">Akun Saya</a>
        </span>
      </div>
      <div id="login-box">
        <form>
        <input type="text" name="username" class="username" />
        <input type="password" name="password" class="password" />
        <input type="submit" class="login-button" value="Go" />
        </form>
      </div>
    </div>
    <div class="clear"></div>

    <!-- cities and page site navigation -->
    <div class="grid_8 main-nav" id="city-links">
      <ul>
        <li class="first"><a href="#">Jakarta</a></li>
        <li><a href="#">Bogor</a></li>
        <li><a href="#">Tangerang</a></li>
        <li><a href="#">Bekasi</a></li>
        <li><a href="#">Depok</a></li>
        <li><a href="#">Banten</a></li>
      </ul>
    </div>
    <div class="grid_4 main-nav" id="site-links">
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Kontak</a></li>
        <li><a href="#">Produk</a></li>
        <li><a href="#">Bisnis</a></li>
      </ul>
    </div>
    <div class="clear"></div>

    <!-- map, categories links and banners -->
    <div class="grid_8">
      <div id="map-container-front">
        <div id="map-container" class="large-map"></div>
      </div>
      <div id="place-category-front">
        <div id="place-category"></div>
      </div>
      <div class="clear"></div>
    </div>
    <!-- banners -->
    <div class="grid_4">
      <div class="map-sided-banner"></div>
      <div class="map-sided-banner"></div>
      <div class="map-sided-banner"></div>
    </div>
    <div class="clear"></div>
  </div>
</div>

<div class="container_12 canvas">
  <div class="grid_12">
    <div class="featured-places-container">
      <a class="prev browse left"></a>
      <div id="featured-places">
        <div class="items">
          <!-- 1-5 -->
          <div>
             <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
             <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
             <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
             <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
             <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
          </div>
          <!-- 5-10 -->
          <div>
             <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
             <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
             <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
             <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
             <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
          </div>
          <!-- 10-15 -->
          <div>
             <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
             <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
             <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
             <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
             <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
          </div>
        </div><!-- /items -->
      </div><!-- /featured-places -->
      <a class="next browse right"></a>
      <div class="clear"></div>
    </div><!-- /featured-places-container -->
  </div><!-- grid_12 -->
  <div class="clear"></div>

  <!-- big search -->
  <div class="grid_12" id="main-search">
    <form>
    <select class="city">
      <option value="">Semua kota</option>
    </select>
    <select class="category">
      <option value="">Semua kategori</option>
    </select>
    <input type="text" class="" />
    <input type="submit" class="" value="Search" />
    <a class="advertising-info" href="#">Pasang iklan</a>
    </form>
  </div>
  <div class="clear"></div>

  <div class="grid_2">
    <div id="sidebar">
      <ul>
        <li>
          <a class="map" href="#">Kuliner (20)</a>
          <ul>
            <li><a class="map" href="#">Bengkel (2)</a></li>
            <li><a class="map" href="#">Long text cat (2)</a></li>
            <li><a class="map" href="#">afkasdf adkfj (1)</a></li>
            <li><a class="map" href="#">afkasdf adkf (11)</a></li>
            <li><a href="#">afkasdf adkfj (4)</a></li>
          </ul>
        </li>
        <li>
          <a class="map" href="#">Kuliner (20)</a>
          <ul>
            <li><a class="map" href="#">Bengkel (2)</a></li>
            <li><a class="map" href="#">Long text cat (2)</a></li>
            <li><a class="map" href="#">afkasdf adkfj (1)</a></li>
            <li><a class="map" href="#">afkasdf adkf (11)</a></li>
            <li><a href="#">afkasdf adkfj (4)</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <div class="grid_6">
    <div id="main">
      <div class="places">
          <div class="place first">
            <h4>Title</h4>
            <div class="place-picture"></div>
            <div class="place-description">
              <p>fdasfjasfjasdfjasldf</p>
            </div>
          </div>
          <div class="place">
            <h4>Title aldfaldsfj adfjadkfjaldf  asdjfalfj</h4>
            <div class="place-picture"></div>
            <div class="place-description">
              <p>fdasfjasfjasdfjasldf akfjadsf adsfjaldf asdkfaslfj</p>
            </div>
          </div>
          <div class="place first">
            <h4>Title</h4>
            <div class="place-picture"></div>
            <div class="place-description">
              <p>fdasfjasfjasdfjasldf</p>
            </div>
          </div>
          <div class="place">
            <h4>Title aldfaldsfj adfjadkfjaldf  asdjfalfj</h4>
            <div class="place-picture"></div>
            <div class="place-description">
              <p>fdasfjasfjasdfjasldf akfjadsf adsfjaldf asdkfaslfj</p>
            </div>
          </div>
      </div>
      <div class="pagination">
        <!--
        <span class="disabled">Sebelumnya</span> |-->
        <span class="current">1</span>
        <span><a href="#">2</a></span>
        <span><a href="#">3</a></span>
        <span><a href="#">4</a></span>
        <!--
        <span><a href="#" title="Berikutnya" class="next">Berikutnya</a></span>
        <span><a href="#" class="last" title="Terakhir">Terakhir</a></span>00>-->
      </div>
    </div>
  </div>

  <div class="grid_4">
    <div id="main-banner-container">
      <div class="main-banner"></div>
      <div class="main-banner"></div>
    </div>
  </div>
  <div class="clear"></div>

  <!-- bottom banner -->
  <div class="grid_3">
    <div class="bc bottom-banner-container">
      <div class="bcc bcc_1">
        <div class="bcci"></div><!-- bottom-banner-1 -->
      </div>  
    </div>
  </div>
  <div class="grid_9">
    <div class="bc bottom-banner-container">
      <div class="bcc bcc_6">
        <div class="bcci"></div><!-- bottom-banner-1 -->
        <div class="bcci"></div><!-- bottom-banner-2 -->
        <div class="bcci"></div><!-- bottom-banner-3 -->
        <div class="bcci"></div><!-- bottom-banner-1 -->
        <div class="bcci"></div><!-- bottom-banner-2 -->
        <div class="bcci"></div><!-- bottom-banner-3 -->
      </div>
    </div>
  </div>
  <!-- /bottom banner -->
  <div class="clear"></div>

  <div class="grid_4 bc">
    <div class="learnmore">
      <h4>Learn More</h4>
      <div class="bcc bcc_3">
        <div class="bcci">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Forum</a></li>
          </ul>
        </div>
        <div class="bcci">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Forum</a></li>
          </ul>
        </div>
        <div class="bcci">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Forum</a></li>
          </ul>
        </div>
      </div><!-- /bcc -->
    </div><!-- /learnmore -->
  </div><!-- /grid_4 bc -->
  <div class="grid_4 bc">
    <div class="tweets">
      <h4>Our latest tweet @infojabotabek</h4>
    </div>
  </div>
  <div class="grid_4 bc">
    <div class="artikel">
      <h4>Artikel ruang usaha</h4>
      <div class="bcc bcc_2">
        <div class="bcci">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Forum</a></li>
          </ul>
        </div>
        <div class="bcci">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Forum</a></li>
          </ul>
        </div>
      </div><!-- /bcc -->
    </div><!-- /artikel -->
  </div>
  <div class="clear"></div>
</div>
<!-- end .container_12 -->

<div id="footer">
  <div class="container_12">
    <div id="footer-content">
      Copyright &copy; 2011 InfoJABOTABEK.COM Hak Cipta dilindungi undang-undang. Dilarang menggandakan
      apapun dari situs ini tanpa izin tertulis dari kami. Griya Sangat Indah No. 249, Bekasi Utara | xxx
    </div>
  </div>
  <div class="clear"></div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
$(function() {
  function loadMap() {
    var ll = new google.maps.LatLng(-34.397, 150.644);
    var opt = {
      zoom: 8,
      center: ll,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var el = $("#map-container");
    var map = new google.maps.Map(document.getElementById("map-container"), opt);
  }
  loadMap();
  $('#featured-places').scrollable();
});
</script>
</body>
</html>
